<template>
	<u-popup :show="show" mode="center" bgColor="transparent">
		<!-- <view class="discount-modal-a-wrapper">
      <view class="img-bg-wrapper">
        <image class="img-bg" :src="staticImgs.bgD" mode=""></image>
      </view>
    </view> -->
		<image style="width: 447rpx;height: 550rpx;display: block;" :src="staticImgs.bgD" mode="" @click="closeHandle">
		</image>
	</u-popup>
</template>

<script>
	// 老用户回馈 0元购券
	import {
		getAssignDiscount,
		getUserDiscount
	} from '@/common/api/user_api.js'
	import {
		debounce
	} from 'lodash'
	export default {
		props: {
			visible: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				show: false,
				staticImgs: {
					bgD: this.imgBaseURL + '/coupon/first-five-discount-scl.png?' + Math.random(),
				},
				loading: false
				// discountUid:'',
			}
		},
		watch: {
			visible: {
				handler(val) {
					this.show = val
				},
				immediate: true
			},
		},
		methods: {
			// showModal(val){
			//   this.show = true
			//   this.discountUid = val
			// },
			closeHandle: debounce(async function() {
				if (this.loading) {
					return false
				}
				this.loading = true
				getAssignDiscount().then(res => {
					getUserDiscount({
						discountUid: res.data.data.discountUid
					}).then(res => {
						if (res.data.code == 200) {
							this.$showToast('领取成功')
						} else {
							this.$showToast('领取失败,请再次点击')
						}
						this.$emit('close')
					})
				})
				// this.loading = false
				setTimeout(() => {
					this.loading = false
				}, 1500)
			}, 1000)
		}
	}
</script>

<style lang="scss" scoped>
	$w: 447rpx;
	$h: 550rpx;

	.discount-modal-a-wrapper {
		position: relative;

		.img-bg-wrapper {
			display: flex;
			justify-content: center;
			position: absolute;
			z-index: 999;
			top: 0;
			left: 0;
			right: 0;

			.img-bg {
				width: $w;
				height: $h;
				margin: auto;
			}
		}
	}
</style>